<template>
    <div class="showBox">
      <div class="head">
        <select-store @handleChange="optionChange"/>
        <img src="@/assets/images/img_icon/peops_icon.svg">
        <p>总人数 <span>{{all}}</span>人</p>
        <el-divider direction="vertical"></el-divider>
        <p>缺勤人数 <span>{{short}}</span>人</p>
        <el-divider direction="vertical"></el-divider>
        <p>满勤人数 <span>{{total1}}</span>人</p>
      </div>

      <div class="searchBar">
        <el-input v-model="searchKey" placeholder="请输入搜索词"></el-input>
        <el-date-picker
          v-model="startTime"
          size="small"
          type="month"
          placeholder="选择月份"
          style="width: 150px;margin-left: 20px;"
          value-format="yyyy-MM"
        >
        </el-date-picker>
        <el-button size="mini" type="primary" round  @click="search">搜索</el-button>

      </div>

      <div class="table">
        <el-table :data="tableData" height="100%" size="mini" v-loading="loadings">
          <el-table-column label="姓名" prop="empName" align="center"></el-table-column>
<!--          <el-table-column label="员工编号" prop="empCode" align="center"></el-table-column>-->
          <el-table-column label="性别" align="center" prop="sex">
            <template slot-scope="scope">
              {{scope.row.empSex == '1' ? '男':'女'}}
            </template>
          </el-table-column>
          <el-table-column label="所属店面" prop="orgName" align="center"></el-table-column>
          <el-table-column label="应出勤天数" prop="totalDays" align="center"></el-table-column>
          <el-table-column label="实际出勤天数" prop="actDays" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" round @click="goDetail(scope.row)">
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="paging">
        <el-pagination :page-sizes="[10, 20, 30, 50, 100]"
                     :page-size="pageSize"
                     :current-page="currentPage"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     >
        </el-pagination>
      </div>
    </div>
</template>

<script>
  import {queryStoreOrgseq} from '@/api/memberinfo'
  import {getAttendanceData, attendanceStatistics} from '@/api/smartShops'
  import {formatDate} from '@/utils/format-data'
  import selectStore from '../components/selectStore'
    export default {
        name: "Index",
        components: {selectStore},
        data(){
          return{
            loadings: false,
            searchKey:'',
            pageSize:10,
            currentPage:1,
            total:0,
            tableData:[],
            value:[],
            options:[],
            orgSeq:'',
            all:0,
            short:0,
            total1:0,
            startTime: this.format(new Date(), 'yyyy-MM'),
            searchStartTime: '',
          }
        },
      methods:{
        format(val, data) {
          return formatDate(val,data)
        },
        optionChange(val){
          this.orgSeq=val[val.length-1];
          this.getData();
        },
        goDetail(row){
          this.$router.push({
            name:'attendanceRecordDetail',
            params:{empUuid:row.empUuid, date: this.searchStartTime}})
        },
        getAllData(arr){
          this.orgSeq=arr[0];
          this.getData();
        },
        sizeChange(size){
          this.pageSize=size;
          this.getData();
        },
        currentChange(current){
          this.currentPage=current;
          this.getData();
        },
        async getData(){
          this.loadings= true
          this.searchStartTime = this.startTime
          let {total, records} = await getAttendanceData({
            size:this.pageSize,
            current:this.currentPage,
            condition:{
              orgSeq:this.orgSeq,
              empName:this.searchKey,
              staYear:this.startTime.split("-")[0]||'',
              staMonth:this.startTime.split("-")[1]||''
            }
          });
          this.loadings= false
          if (records){
              this.tableData = records
              this.total = total
              return
          }
            this.tableData = []
              this.total = 0
        },
        async attendanceStatistics() {
          let {result} = await attendanceStatistics({
              orgSeq:this.orgSeq,
              empName:this.searchKey,
              staYear:this.startTime.split("-")[0]||'',
              staMonth:this.startTime.split("-")[1]||''
          });
          if (result){
            this.all = result.total
            this.short = result.absenceRate
            this.total1 = result.workRate
            return
          }
          this.all = '0';
          this.short = '0';
          this.total1 = '0'
        },
        search(){
          this.getData();
          this.attendanceStatistics()
        }
      },
      created() {
        this.orgSeq=JSON.parse(localStorage.getItem('logininfo')).orgList[0].orgSeq||'';
       this.value = [this.orgSeq]
      },
      mounted() {
          this.getData();
          this.attendanceStatistics()
      }
    }
</script>

<style scoped lang="scss">
  /*public css*/
  .showBox{
    width: 100%;
    height: 100%;
    .head{
      border-bottom: 1px solid #DCDFE6;
      width: 100%;
      box-sizing: border-box;
      height:50px;
      padding: 10px 0;
      display: flex;
      align-items: center;
      img{
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }

      p{
        padding: 0 10px;
        font-size: 14px;
      }

      .selectStore{
        height: 30px;
        width: 300px;
        display: flex;
        align-items: center;

        .el-cascader{
          width: 200px;
        }
      }
    }

    .searchBar{
      height: 50px;
      width: 100%;
      display: flex;
      align-items: center;

      .el-input{
        width: 130px;
      }
      .el-date-editor{
        .el-input__prefix{
          display: none;
          /*.el-input__icon{*/
          /*  line-height: 32px !important;*/
          /*}*/
        }
      }
      .el-button{
        margin: 0 10px;
      }
    }

    .table{
      height: calc(100% - 150px);
      padding: 10px 15px;

    }

    .paging{
      height: 50px;
      width: 100%;
    }
  }
  /*scoped css*/
</style>
